ClojureScript এর মাধ্যমে Web Application Development

Computer Programming - ক্লোজার (Clojure) ClojureScript এবং Web Programming (ClojureScript and Web Programming) |

211

ClojureScript এর মাধ্যমে Web Application Development

ClojureScript হল Clojure ভাষার একটি ভেরিয়েন্ট যা JavaScript তে কম্পাইল হয়। এটি Clojure এর সমস্ত ফিচার সহ JavaScript রuntime-এ রান করার জন্য তৈরি করা হয়েছে এবং বিশেষত web development এ ব্যবহৃত হয়। ClojureScript ব্যবহার করে আমরা JavaScript ভিত্তিক ব্রাউজার বা Node.js অ্যাপ্লিকেশন তৈরি করতে পারি, যা Clojure এর ফাংশনাল প্রোগ্রামিং কৌশলগুলির সুবিধা দেয়।

ClojureScript একটি অত্যন্ত শক্তিশালী টুল যা Clojure ভাষার শক্তি এবং JavaScript এর ইকোসিস্টেমের সুবিধা একত্রিত করে, এবং এটি React, Re-frame, Om Next ইত্যাদি লাইব্রেরি ব্যবহার করে UI ডেভেলপমেন্টের জন্য ব্যবহার করা যায়।

এখানে আমরা ClojureScript দিয়ে Web Application Development করার প্রক্রিয়া ও টেকনিকগুলি নিয়ে আলোচনা করব।

১. ClojureScript এর সেটআপ

ClojureScript দিয়ে একটি Web Application তৈরি করার জন্য প্রথমে lein-figwheel বা shadow-cljs ব্যবহার করে সেটআপ করতে হয়। এই টুলগুলো ClojureScript কম্পাইলেশন, hot reloading এবং ব্রাউজারে কোড রান করতে সহায়ক।

১.১. lein-figwheel ব্যবহার করে সেটআপ

project.clj ফাইলে নিম্নলিখিত ডিপেনডেন্সি যুক্ত করুন:

(defproject my-web-app "0.1.0-SNAPSHOT"
  :dependencies [[org.clojure/clojure "1.10.1"]
                 [org.clojure/clojurescript "1.10.773"]
                 [figwheel-sidecar "0.5.20"]
                 [com.cemerick/piggieback "0.2.2"]
                 [reagent "0.8.1"]]
  :plugins [[lein-figwheel "0.5.20"]]
  :cljsbuild {:builds [{:id "dev"
                        :source-paths ["src"]
                        :figwheel true
                        :compiler {:main "my-web-app.core"
                                   :output-to "resources/public/js/main.js"
                                   :output-dir "resources/public/js/out"}}]})

এখানে:

Figwheel ব্যবহার করা হয়েছে যা live reloading সমর্থন করে, অর্থাৎ কোড পরিবর্তন করার সাথে সাথে ব্রাউজারে তা প্রতিফলিত হয়।
Reagent (React এর উপর ভিত্তি করে তৈরি একটি ClojureScript লাইব্রেরি) UI তৈরি করার জন্য ব্যবহৃত হচ্ছে।

১.২. Figwheel চালানো

কমান্ড লাইন থেকে প্রজেক্টটি চালাতে:

lein figwheel

এটি Figwheel সার্ভার চালু করবে এবং ব্রাউজারে আপনার অ্যাপ্লিকেশন রেন্ডার করবে।

২. Reagent দিয়ে UI তৈরি করা

Reagent হল একটি ClojureScript লাইব্রেরি যা React এর উপর ভিত্তি করে তৈরি এবং UI তৈরি করার জন্য ব্যবহৃত হয়। Reagent ব্যবহারে আপনি সাধারণভাবে ClojureScript কোডের মধ্যে React কম্পোনেন্ট তৈরি করতে পারেন।

২.১. Reagent কম্পোনেন্ট তৈরি

(ns my-web-app.core
  (:require [reagent.core :as reagent]))

(defn hello-world []
  [:div
   [:h1 "Hello, World!"]
   [:p "This is a simple ClojureScript app using Reagent."]])

(defn mount-root []
  (reagent/render [hello-world] (.getElementById js/document "app")))

(defn init []
  (mount-root))

এখানে:

hello-world একটি সাধারণ Reagent কম্পোনেন্ট যা HTML আউটপুট তৈরি করে।
mount-root হল একটি ফাংশন যা এই কম্পোনেন্টটিকে #app ID সহ একটি HTML এলিমেন্টে রেন্ডার করবে।
init ফাংশনটি অ্যাপ্লিকেশন ইনিশিয়ালাইজ করতে ব্যবহৃত হয়।

২.২. HTML ফাইল সেটআপ

<!DOCTYPE html>
<html>
  <head>
    <title>My ClojureScript App</title>
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

এখানে, আমরা HTML ফাইল তৈরি করেছি যেখানে ClojureScript কোডটি রেন্ডার হবে। main.js ফাইলটি ClojureScript দ্বারা কম্পাইল করা JavaScript কোড ধারণ করবে।

৩. State Management: Re-frame

ClojureScript এ state management এবং event handling করার জন্য Re-frame একটি জনপ্রিয় ফ্রেমওয়ার্ক। Re-frame ClojureScript এর ফাংশনাল পারাডাইম ব্যবহার করে অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট এবং ইভেন্ট হ্যান্ডলিংকে অত্যন্ত সিম্পল ও কার্যকর করে তোলে।

৩.১. Re-frame সেটআপ

(ns my-web-app.core
  (:require [re-frame.core :as re-frame]
            [reagent.core :as reagent]))

; App state
(re-frame/reg-fx
  :console-log
  (fn [message] (js/console.log message)))

(defn hello-world []
  [:div
   [:h1 "Hello, Re-frame!"]])

(defn init []
  (re-frame/dispatch [:initialize]))

(defn mount-root []
  (reagent/render [hello-world] (.getElementById js/document "app")))

(defn start []
  (init)
  (mount-root))

এখানে, Re-frame এর মাধ্যমে অ্যাপ্লিকেশন স্টেটের জন্য একটি ফাংশন ডিফাইন করা হয়েছে, এবং আমরা re-frame/dispatch এর মাধ্যমে ইভেন্ট ডিস্ট্রিবিউশন করছি। Re-frame, কোডের অংশগুলিকে ম্যানেজ করার জন্য একটি সেন্ট্রালাইজড স্টোর ব্যবহার করে।

৪. API Integration: ClojureScript এবং RESTful API

ClojureScript এর মাধ্যমে RESTful API ইন্টিগ্রেট করা সম্ভব। আপনি cljs-http বা ajax.core এর মতো লাইব্রেরি ব্যবহার করে API কল করতে পারেন।

৪.১. API কল করা

(ns my-web-app.core
  (:require [cljs-http.client :as http]
            [reagent.core :as reagent]))

(defonce app-state (reagent/atom {:data nil}))

(defn fetch-data []
  (http/get "https://jsonplaceholder.typicode.com/posts"
           {:handler #(reset! app-state {:data %})}))

(defn view-data []
  [:div
   [:h2 "Fetched Data"]
   (for [item (:data @app-state)]
     [:p (:title item)])])

(defn mount-root []
  (reagent/render [view-data] (.getElementById js/document "app")))

(defn init []
  (fetch-data)
  (mount-root))

এখানে:

http/get API থেকে ডেটা ফেচ করছে।
ডেটা পাওয়ার পর, এটি app-state এ সেভ হচ্ছে এবং view-data কম্পোনেন্টের মাধ্যমে রেন্ডার হচ্ছে।

৫. Deployment

ClojureScript অ্যাপ্লিকেশন ডেপ্লয় করার জন্য সাধারণত Heroku, Netlify, বা AWS ব্যবহার করা হয়। ClojureScript অ্যাপ্লিকেশন সাধারণত JavaScript কোড হিসেবে কম্পাইল হয়ে থাকে, সুতরাং এটি কোনও স্ট্যান্ডার্ড স্ট্যাটিক সাইট হোস্টিং সার্ভিসে আপলোড করা যেতে পারে।

উদাহরণ: Netlify তে ডেপ্লয় করা

Build the app: lein cljsbuild once কমান্ডটি চালান যাতে ClojureScript কোড JavaScript এ কম্পাইল হয়।
Deploy: Netlify-তে অ্যাপ্লিকেশন ডেপ্লয় করতে public ডিরেক্টরি আপলোড করুন।

সারসংক্ষেপ

ClojureScript দিয়ে Web Application Development একটি শক্তিশালী এবং ফলপ্রসূ প্রক্রিয়া। এখানে গুরুত্বপূর্ণ পয়েন্টগুলি:

Ring এবং Compojure ব্যবহার করে API তৈরি করা।
Reagent এবং Re-frame ব্যবহার করে UI এবং স্টেট ম্যানেজমেন্ট।
cljs-http বা ajax.core ব্যবহার করে API ইন্টিগ্রেশন।
Hot reloading এর জন্য Figwheel বা shadow-cljs।

ClojureScript দিয়ে React বা অন্যান্য JavaScript লাইব্রেরি ব্যবহার করে শক্তিশালী এবং স্কেলেবল ওয়েব অ্যাপ্লিকেশন তৈরি করা সম্ভব।

common.content_added_by

Md Azizur Rahman

common.read_more

ClojureScript কী এবং কেন প্রয়োজন ClojureScript Project তৈরি এবং Compile করা React এবং Reagent এর সাথে ClojureScript এর ইন্টিগ্রেশন

ClojureScript এর মাধ্যমে Web Application Development